<template>
  <d2-container>
    <div class="flex-1 mx-3">
      <div class="flex-1 pb-3">
        <div class="font-s-3 font-w">商家网盘</div>
        <div class="flex-1 d-f mt-4">
          <div class="mr-8">
            <div class="" style="width: 200px;"><el-progress :text-inside="true" :stroke-width="22"
                :percentage="parseFloat(usageRate)" status="warning"></el-progress></div>
            <div class="row-ac font-s-2 text-light-black mt-1">
              <div class="font-s-2">容量</div>
              <div class="ml-1">{{ fileinfo.total_size }}/{{ fileinfo.capacity }}</div>
            </div>
          </div>
          <div class="mt-2 ml-5 flex-1 row-ac justify-end">
            <div class="iconfont icon-fenlei1 mr-5 right-icon" v-if="showType == 2" @click="showWay(1)"></div>
            <div class="iconfont icon-fenlei mr-5 right-icon" v-if="showType == 1" @click="showWay(2)"></div>
          </div>
        </div>
      </div>
      <div class="flex-1 p-3 border">
        <div class="mt-3 flex-1 row-ac-fw" v-if="showType == 1">
          <div class="row-a-j-fc mr-6 mb-6" v-for="(item, index) in fileList" :key="index">
            <div class="file_img">
              <el-popover placement="right" trigger="hover">
                <el-image slot="reference" style="width: 88px; height: 88px" :src="item.file_url" fit="cover" />
                <el-image style="width: 280px; height: 280px" :src="item.file_url" fit="contain" />
              </el-popover>
            </div>
            <!-- <div class="mt-1 font-s-2 file-name in1line">{{ item.file_name }}</div> -->
            <div class="file-name font-s-1 text-light-grey mt-1">
              <div>文件大小</div>
              <div>{{ item.file_size }}</div>
              <div class="font-s-1 text-light-grey mt"><span>文件类型:</span>{{ item.file_info.file_extension }}</div>
              <!-- <div class="font-s-1 text-light-grey mt">{{ item.file_info.upload_time }}</div> -->
            </div>
          </div>
        </div>
        <div class="mt-3 flex-1" v-if="showType == 2">
          <div class="row-ac mb-3" v-for="(item, index) in fileList" :key="index">
            <div class="file-img-small">
              <el-popover placement="right" trigger="hover">
                <el-image slot="reference" style="width: 28px; height: 28px" :src="item.file_url" fit="cover" />
                <el-image style="width: 280px; height: 280px" :src="item.file_url" fit="contain" />
              </el-popover>
            </div>
            <div class="font-s-1 file-name-small in1line mx-4">{{ item.file_name }}</div>
            <div class="mr-4 font-s-1">文件大小:{{ item.file_size }}</div>
            <div class="font-s-1 text-light-grey mr-4">文件类型:{{ item.file_info.file_extension }}</div>
            <div class="font-s-1 text-light-grey">上传时间:{{ item.file_info.upload_time }}</div>
          </div>
        </div>
      </div>
      <div class="flex-1 ml-2 mt-2 d-f">
        <div class="">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="queryInfo.page" :page-size="queryInfo.page_size" layout="total, prev, pager, next" :total="fileTotal">
          </el-pagination>
        </div>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import {
    imagesUploadUrl
  } from '@/utils/interface'
  import {
    fileinfoListUrl
  } from '@/utils/netdisk'
  import {
    calculateFileSize
  } from '@/utils/utils.js'
  export default {
    data() {
      return {
        queryInfo: {
          user_id:'',
          page: 1,
          page_size: 30
        },
        fileinfo: '',
        fileList: [],
        fileTotal: 0,
        usageRate: 0,
        showType: 1,
        getUserId:''
      }
    },
    created() {
      this.getFileinfoList()
    },
    mounted() {
        this.queryInfo.user_id = this.$route.query.userId
    },
    methods: {
      getFileinfoList() {
        this.$get(fileinfoListUrl, this.queryInfo).then(res => {
          console.log(res.data.code);
          if (res.data.code == 200) {
            this.fileinfo = res.data.data
            this.fileList = res.data.data.file_list
            this.fileTotal = res.data.data.total
            this.usageRate = res.data.data.usage_rate
          }
        })
      },
      chooseFile() {
        const fileInput = this.$refs.fileInput;
        fileInput.click();
      },
      addPictures(event) {
        const fileInput = event.target;
        const imageFile = fileInput.files[0];
        if (!imageFile) {
          alert("请选择要上传的图片");
          return;
        }
        const formData = new FormData();
        formData.append("file", imageFile);
        this.$post(imagesUploadUrl, formData).then(res => {
          this.getFileinfoList()
        })
      },
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.page_size = newSize
        this.getFileinfoList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getFileinfoList()
      },
      showWay(type) {
        console.log(type);
        if (type == 1) {
          this.showType = 1
        } else if (type == 2) {
          this.showType = 2
        }
      }
    }
  }
</script>

<style lang="scss">
  .netdisk-left {
    width: 138px;
    height: 668px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin-left: 28px;
  }

  .icon-wenjianjia {
    color: #F1A902;
    font-size: 26px;
  }

  .folder-name input {
    border: none;
    width: auto;
    height: auto;
  }

  .file-name {
    width: 88px;
  }

  .file-name-small {
    width: 168px;
  }

  .right-icon {
    font-size: 24px;
  }
</style>
